<template>
  <div class="vpt-modal-base-self-bg"
       v-if="showModal">
    <div class="vpt-modal-base-self"
         :style="modalStyle">
      <img class="top-left"
           src="../../../assets/img/theme3/icon-top-left.png" />
      <img class="top-right"
           src="../../../assets/img/theme3/icon-top-right.png" />
      <header class="vpt-modal-base-self-header">
        <div class="titleshiow">{{ baseData.cluster_name_zh_cn }}</div>
        <div class="vpt-close"
             @click="onShowModal(false)">
          <img :src="close"
               :style="closeStyle"
               alt="关闭" />
        </div>
      </header>
      <div class="table-container">
        <moduleAppTable class="app-table"
                        height="7.78rem"
                        :column="column"
                        :tableData="tableData"
                        @row-click="rowClick"></moduleAppTable>

        <div class="contentmst">
          <div class="titleshiow">指标趋势分析</div>
          <chartPanel class="app-tables"
                      height="7.78rem"
                      :chartType="chartType"
                      v-for="(item, index) in lineData"
                      :key="index"
                      :itemData="item"></chartPanel>
        </div>

      </div>
      <!-- <img class="bottom-left"
             src="../../../assets/img/theme3/icon-bottom-left.png" />
        <img class="bottom-right"
             src="../../../assets/img/theme3/icon-bottom-right.png" /> -->
    </div>
  </div>
</template>
  
  <script setup>
import {
  ref,
  defineExpose,
  computed,
  onMounted,
  onUnmounted,
  watch,
  onBeforeUnmount
} from "vue";
import {
  getAppListData,

} from "@/api/mockApi/application.js";
import close from "@/assets/img/theme1/close.png";
import moduleAppTable from "../../../pages/application/component/app-table/indexnew.vue";
import { usePeriodicRequest } from "@/utils/usePeriodicRequest.js";
import chartPanel from "@/components/vpt-chart-panel/indexnew.vue";
import {
  getLineChartData, getclounData, getCharData
} from "@/api/mockApi/infrastructure.js";
const props = defineProps({
  chartType: { type: String, default: "init" },

  showModal: {
    type: Boolean,
    default: false,
  },
  detailData: {
    type: Object,
    default: () => ({}),
  },
  isLandscape: { type: Boolean, default: false },
  modalStyle: {
    type: Object,
    default: () => ({
      top: "10%",
      width: "7.5rem",
      maxHeight: "7.5rem",
      padding: "0.24rem",
    }),
  },
  titleStyle: {
    type: Object,
    default: () => ({
      // marginLeft: " 0.1rem",
      fontSize: "0.18rem",
    }),
  },
  modalHeaderStyle: {
    type: Object,
    default: () => ({
      // lineHeight: "0.5rem",
    }),
  },
  closeViewStyle: {
    type: Object,
    default: () => ({
      // marginTop: "0.1rem",
      // paddingRight: "0.2rem",
    }),
  },

  closeStyle: {
    type: Object,
    default: () => ({
      width: "0.24rem",
    }),
  },
  nameStyle: {
    type: Object,
    default: () => ({
      fontSize: "0.16rem",
    }),
  },
  itemStyle: {
    type: Object,
    default: () => ({
      marginBottom: 0,
    }),
  },
  palnListStyle: {
    marginTop: "0.16rem",
  },
  tagStyle: {
    type: Object,
    default: () => ({}),
  },
  labelStyle: {
    type: Object,
    default: () => ({
      fontSize: "0.14rem",
      marginRight: "0.1rem",
    }),
  },
  valueStyle: {
    type: Object,
    default: () => ({
      fontSize: "0.18rem",
    }),
  },
  pieWidth: {
    type: String,
    default: "130",
  },
  pieHeight: {
    type: String,
    default: "130",
  },
  titleFontSize: { type: Number, default: 12 },
  totalFontSize: { type: Number, default: 12 },
  titleTop: { type: String, default: "25" },
  messageStyle: {
    type: Object,
    default: () => ({
      width: "6rem",
      "white-space": "wrap",
      "-webkit-line-clamp": 3,
      "-webkit-box-orient": "vertical",
      display: "-webkit-box",
    }),
  },
  itemLeftStyle: {
    type: Object,
    default: () => ({}),
  },
  itemTitleStyle: {
    type: Object,
    default: () => ({
      fontSize: "0.16rem",
    }),
  },
  lineHeight: {
    type: String,
    default: "1.3rem",
  },
  yAxisFontSize: {
    type: Number,
    default: 14,
  },
  planListStyle: {
    type: Object,
    default: () => ({
      maxHeight: "4rem",
      marginTop: "0.16rem",
    }),
  },
  tableData: { type: Array, default: [] },
  lineData: { type: Array, default: [] },
  column: {
    type: Array, default: []
  },
});

const monitoringData = ref([]);
const defaultTabs = ref("01");
const defaultValue = ref("");
// 获取监控数据chart
const getLineChart = (params) => {
  getLineChartData(params).then((res) => {
    monitoringData.value = res.data || [];
    setTimeout(() => {
    }, 0)
  });
};

const lineChart = usePeriodicRequest(getLineChart, 300000, {
  type: defaultTabs.value,
  ip: defaultValue.value,
});

// const tableData = ref([]);
// const columns = ref([]);

// 获取应用监控告警列表
const getAppList = (
  params = {
    process_status: defaultTabs.value,
  }
) => {
  getAppListData(params).then((res) => {
    tableData.value = res.data;

  });
};

// 获取列表点击行数据
const rowClick = (item) => {
  emit("rowClick", item);

};

// 应用监控告警列表定时请求
const appListRequest = usePeriodicRequest(getAppList, 3000, {
  process_status: "0",
});


const onShowModal = (value) => {
  emit("onChange", value);
};

const handleClick = (item) => {
  emit("handleClick", item);
};

const emit = defineEmits(["onChange", "handleClick"]);

const baseData = computed(() => {
  return {
    cluster_name_zh_cn: props.detailData.cluster_name_zh_cn,
  };
});

watch(
  () => props.showModal,
  (value) => {

    // 遮罩层开启时隐藏页面滚动条
    const htmlDom = document.documentElement;
    htmlDom.className = value ? "hidden-scroll" : "";
  },
  { deep: true }
);
onMounted(() => {
  // appListRequest.startFetching();

  lineChart.startFetching();
});

onBeforeUnmount(() => {
  // appListRequest.stopFetching();
  // clounListRequest.stopFetching();
  lineChart.stopFetching();
});

  </script>
  
  <style lang="less" scoped>
.titleshiow {
  font-size: 0.18rem;
  font-weight: 500;
  color: #ffffff;
}
.contentmst {
  height: calc(100% - 0.1rem);
  width: 4.48rem;
  margin-left: 0.48rem;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
}
.vpt-modal-base {
  .ant-modal-content {
    box-shadow: inset 0 -1px 0 0 #ffffff33;
    border: 1px solid #4895e899;
    background-color: #ffffff00;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../../assets/img/theme1/base-model.png);
  }
}

.vpt-modal-base-self-bg {
  z-index: 999;
  // font-family: HarmonyOS_Sans_SC_Medium;
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  inset-inline-start: 0;
  height: 100%;
  background: #000000e3;
  display: flex;
  justify-content: center;
  align-items: center;

  .vpt-modal-base-self {
    margin: 0 auto;
    // pointer-events: none;
    position: relative;
    // top: 20%;
    width: 8.12rem;
    // height: 15.1rem;
    max-width: calc(100vw - 32px);
    box-shadow: inset 0 -1px 0 0 #ffffff33;
    // border: 1px solid #4895e899;
    background: #061b31;
    border: 0.01rem solid #0a3268;
    // background-color: #ffffff00;
    // background-repeat: no-repeat;
    // background-size: 100% 100%;
    // background-image: url(../../assets/img/theme1/base-model.png);
    z-index: 999;

    .vpt-img {
      width: 0.18rem;
    }

    .vpt-modal-base-self-header {
      display: flex;
      height: 0.2rem;
      justify-content: space-between;
      // border-bottom: 1px solid #ffffff33;

      .vpt-title {
        font-weight: 500;
        color: #ffffff;
      }

      .vpt-close {
        cursor: pointer;

        // padding-right: 0.2rem;
        img {
          width: 0.48rem;
          cursor: pointer;
        }
      }
    }
  }
}
.vpt-modal-base-self-body {
  padding: 0.16rem 0;
  // font-family: HarmonyOS_Sans_SC;

  .section-content {
    height: 2.4rem;
    width: 100%;
    display: flex;
    justify-content: space-between;

    .section-left {
      width: 50%;
      padding-right: 0.24rem;
    }

    .section-right {
      flex: 1;
      padding-left: 0.24rem;
      border-left: 2px solid #384d64;
    }
  }
}

.vpt-em-green {
  color: #00b675;
}

.vpt-em-organge {
  color: #ffc300;
}

.vpt-em-red {
  color: #f53f3f;
}

.vpt-item-data-list {
  width: 100%;
  display: flex;
  margin-top: 0.12rem;
  margin-bottom: 0.24rem;

  .item-data {
    display: flex;
    width: 4rem;
    align-items: center;
    // line-height: 0.4rem;

    label {
      font-size: 0.28rem;
      color: #ffffffb3;
      margin-right: 0.1rem;
    }

    em {
      font-style: normal;
      font-size: 0.28rem;
    }
  }
}

.vpt-list {
  color: #86909C;
  display: flex;
  justify-items: center;
  justify-content: space-between;
  margin-top: 0.12rem;
  margin-bottom: 0.24rem;

  .item-data {
    font-size: 0.14rem;

    .item-data-val {
      color: #1D2129;
      margin-bottom: 0.04rem;
    }
  }
}

.empty-div {
  width: 100%;
  height: 1.5rem;
  line-height: 1.5rem;
  color: #ffffffb3;
  text-align: center;
}
.table-container {
  height: 8rem;
  display: flex;
  justify-content: space-between;
}
.hidden-scroll {
  overflow-y: hidden;
}
.top-left {
  position: absolute;
  left: 0;
  top: 0;
}
.top-right {
  position: absolute;
  right: 0;
  top: 0;
}
.bottom-left {
  position: absolute;
  left: 0;
  bottom: 0;
}
.bottom-right {
  position: absolute;
  right: 0;
  bottom: 0;
}
.app-table {
  margin-top: 0.1rem;
  width: 10rem !important;
}
.app-tables {
}
</style>
  